import React from 'react';
import {View, Text, Button, Image, ImageBackground, HStack, Pressable, ScrollView} from "@gluestack-ui/themed";
import type {ApplicationScreenProps} from "@/types/navigation";
import {ImmerseScreen, StatusBarView} from "@/components/template";
import {SwiperImage, BriefInfo} from "@/components/k-view";
import {IndexBanner} from "@/types/public";
import {fetchBanners, fetchIndexDataPanel} from "@/services/public";
import {useStore} from "@/store";
import ChannelSwitch from "./components/ChannelSwitch";
import DataPanel from "@/components/data-panel/DataPanel";
import {fetchIndexChart} from "@/services/user";
import {useRefresh} from "@react-native-community/hooks";
import {RefreshControl} from "react-native";
import {DataPanelInterface} from "@/components/data-panel/type";

const Dashboard = ({navigation, route}: ApplicationScreenProps) => {
    const userInfo = useStore.use.userInfo();
    const getUserInfo = useStore.use.getUserInfo();
    const navList = [{
        imgUrl: require("@/theme/assets/images/dashboard/data_overview.png"),
        id: 1,
        label: "数据概览",
        url: "AccountManage" as const
    },]
    const dataPanelRef = React.useRef<DataPanelInterface>(null);

    React.useEffect(() => {
        getUserInfo();
    }, []);

    const {isRefreshing, onRefresh} = useRefresh(() => {
        return new Promise<unknown>((resolve) => {
            setTimeout(() => {
                dataPanelRef.current && dataPanelRef.current.refresh();
                resolve(null);
            }, 1500)
        })

    });

    return (
        <ImmerseScreen>
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={isRefreshing}
                        onRefresh={onRefresh}
                    />
                }
                flex={1}
                showsVerticalScrollIndicator={false}
                bounces={false}
            >
                <ImageBackground
                    position="relative"
                    flex={1}
                    source={require('@/theme/assets/images/dashboard/bg_body.png')}
                >
                    <ImageBackground
                        position="absolute"
                        left={0}
                        top={0}
                        w={"100%"}
                        h={228}
                        zIndex={10}
                        source={require('@/theme/assets/images/dashboard/bg_header.png')}
                    >

                    </ImageBackground>
                    <StatusBarView></StatusBarView>
                    <View
                        flex={1}
                        pt={50}
                        px={12}
                        position="relative"
                        zIndex={20}
                    >

                        <BriefInfo
                            name={userInfo?.name}
                        >
                            {{
                                other: <Text size={"xs"} color={"#95999e"}>全部组织</Text>
                            }}
                        </BriefInfo>
                        <ChannelSwitch></ChannelSwitch>
                        <SwiperImage<{ data: IndexBanner[] }>
                            api={fetchBanners}
                            height={150}
                            showsPagination={false}
                            autoplayTimeout={4}
                        ></SwiperImage>
                        <DataPanel
                            ref={dataPanelRef}
                            mt={12}
                            py={12}
                            api={fetchIndexDataPanel}
                            chartApi={fetchIndexChart}
                            name={"AdData"}
                        >
                        </DataPanel>

                        <HStack
                            borderRadius={"$lg"}
                            mt={10}
                            py={"$3"}
                            px={"$4"}
                            bg={"$white"}
                        >
                            {navList.map((item) => (
                                <Pressable
                                    alignItems={"center"}
                                    key={item.id}
                                    onPress={() => navigation.navigate(item.url)}
                                >
                                    <Image w={32} h={32} source={item.imgUrl} alt={item.label}></Image>
                                    <Text size={"xs"} color={"$textLight950"}>{item.label}</Text>
                                </Pressable>
                            ))}
                        </HStack>
                    </View>
                </ImageBackground>
            </ScrollView>
        </ImmerseScreen>
    );
};

export default Dashboard;